//
// Tooltips
// --------------------------------------------------

// Base class
.@{ns}tooltip {
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  .reset-text(@font-family-base, @line-height-small);

  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  font-size: @font-size-small;
  opacity: 0;

  &.fade {
    transition: opacity .1s linear, transform .1s ease-out;
  }

  &.in {
    opacity: 1;
    transition: opacity .15s linear .2s, transform .15s ease-in .2s;
  }

  // Wrapper for the tooltip content
  .@{ns}tooltip-inner {
    max-width: @tooltip-max-width;
    padding: 2px 10px;
    color: @tooltip-color;
    text-align: center;
    background-color: @tooltip-bg;
    border-radius: @tooltip-border-radius;
    overflow-wrap: break-word;
  }

  // Arrows
  .@{ns}tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}

.@{ns}tooltip-placement-top-left,
.@{ns}tooltip-placement-top-right,
.@{ns}tooltip-placement-top {
  padding: @tooltip-arrow-width 0;
  .set-translate(0, -@tooltip-translate-distance);

  .@{ns}tooltip-arrow {
    bottom: 0;
    // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
    .edge-position(bottom, 1px);
    .ie11-position(bottom, 1px);

    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
}

.@{ns}tooltip-placement-bottom-left,
.@{ns}tooltip-placement-bottom-right,
.@{ns}tooltip-placement-bottom {
  padding: @tooltip-arrow-width 0;
  .set-translate(0, @tooltip-translate-distance);

  .@{ns}tooltip-arrow {
    top: 0;
    // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
    .edge-position(top, 1px);
    .ie11-position(top, 1px);

    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}

.@{ns}tooltip-placement-right-top,
.@{ns}tooltip-placement-right-bottom,
.@{ns}tooltip-placement-right {
  padding: 0 @tooltip-arrow-width;
  .set-translate(@tooltip-translate-distance, 0);

  .@{ns}tooltip-arrow {
    left: 0;
    // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
    .edge-position(left, 1px);
    .ie11-position(left, 1px);

    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }
}

.@{ns}tooltip-placement-left-top,
.@{ns}tooltip-placement-left-bottom,
.@{ns}tooltip-placement-left {
  padding: 0 @tooltip-arrow-width;
  .set-translate(-@tooltip-translate-distance, 0);

  .@{ns}tooltip-arrow {
    right: 0;
    // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
    .edge-position(right, 1px);
    .ie11-position(right, 1px);

    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }
}

.@{ns}tooltip-placement-bottom,
.@{ns}tooltip-placement-top {
  .@{ns}tooltip-arrow {
    left: 50%;
  }
}

.@{ns}tooltip-placement-bottom-left,
.@{ns}tooltip-placement-top-left {
  .@{ns}tooltip-arrow {
    left: @tooltip-arrow-gap-lg;
  }
}

.@{ns}tooltip-placement-bottom-right,
.@{ns}tooltip-placement-top-right {
  .@{ns}tooltip-arrow {
    right: @tooltip-arrow-gap-sm;
  }
}

.@{ns}tooltip-placement-right,
.@{ns}tooltip-placement-left {
  .@{ns}tooltip-arrow {
    top: 50%;
  }
}

.@{ns}tooltip-placement-right-top,
.@{ns}tooltip-placement-left-top {
  .@{ns}tooltip-arrow {
    top: @tooltip-arrow-gap-lg;
  }
}

.@{ns}tooltip-placement-right-bottom,
.@{ns}tooltip-placement-left-bottom {
  .@{ns}tooltip-arrow {
    bottom: @tooltip-arrow-gap-sm;
  }
}
